<template>
  <div style="width: 80%; margin: 0 auto;">

    <div class="detail">
      <div class="detail">问题:</div>
      <div class="detailPanel">
        <div>ID : {{ history.id }}</div>
        <div>Q : {{ history.question }}</div>
      </div>
    </div>

    <div class="detail">
      <div class="detailTitle">答案展示:</div>
      <div class="detailPanel">
        <span>A : </span><div v-html="history.answer"></div>
      </div>
    </div>

    <div class="detail">
      <div class="detailTitle">提问人:</div>
      <div class="detailPanel">
        <div>ID : {{ student.id }}</div>
        <div>NAME : {{ student.name }}</div>
      </div>
    </div>

    <div class="detail" v-if="teacher !== null">
      <div class="detailTitle">回复者:</div>
      <div class="detailPanel">
        <div>ID : {{ teacher.id }}</div>
        <div>NAME : {{ teacher.name }}</div>
      </div>
    </div>

    <div class="detail" v-else>
      <div class="detailTitle">回复者:</div>
      <div class="detailPanel">
        <div>系统回复</div>
      </div>
    </div>

    <div class="detail">
      <div class="detailTitle">当前状态:</div>
      <div class="detailPanel">{{ getTag() }}</div>
    </div>

  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { HistoryService } from "@/services/history.service";

@Component({
  name: "Detail",
})
export default class Detail extends Vue {
  historyId: number = 0;
  history: any = {};
  student: any = {};
  teacher: any = {};

  mounted() {
    if (this.$route.params.id) {
      this.historyId = parseInt(this.$route.params.id);
    } else {
      this.$router.go(-1);
    }
    this.getHistoryDetail();
  }

  getHistoryDetail() {
    HistoryService.detail(this.historyId).then((res: any) => {
      if (res.result) {
        this.history = res.historyBean;
        this.student = res.asker;
        this.teacher = res.responder;
      }
    }).catch((err: any) => {
      throw new Error(err);
    });
  }

  getTag() {
    if (this.history.correct_tag == 0) {
      return "系统答案";
    } else if (this.history.correct_tag == 1) {
      return "老师确认";
    } else if (this.history.correct_tag == 2) {
      return "老师回答";
    } else if (this.history.correct_tag == 3) {
      return "学生疑惑";
    }
  }

}
</script>

<style scoped lang="scss">

.detail {
  margin-top: 32px;
  text-align: left;
}

.detailTitle {
  text-align: left;
  font-weight: 500;
  margin-bottom: 4px;
}

.detailPanel {
  background-color: #e4f7e9;
  margin-top: 8px;
  padding: 12px 16px;
  border-radius: 4px;
}

</style>
